<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <canvas id="myCanvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
        当前浏览器不支持canvas
    </canvas>

    <script>

        window.onload = function () {
            var ctx = document.getElementById("myCanvas").getContext('2d');
            ctx.beginPath();
            ctx.moveTo(100.5, 20.5);//①
            ctx.lineTo(200.5, 20.5);//②
            ctx.strokeStyle = 'black';//默认strokeStyle='black', lineWidth=1, 此处可省略
            ctx.stroke();

            ctx.moveTo(100.5, 40.5);//③
            ctx.lineTo(200.5, 40.5)//④
            ctx.strokeStyle = 'red';
            ctx.stroke();
        }

    </script>

</body>

</html>